﻿<template id="@(ViewBag.PageTemplate)">
    <div class="layout-page-content">
        <el-space fill style="width:100%">
            <el-input v-model="tableName" placeholder="请输入数据库表名，按回车后生成相应 Table Columns 代码" clearable v-on:keyup.enter.native="generate" v-on:clear="clear"></el-input>
            <div v-if="list.length" class="page-table-box">
                <el-table class="page-table" :data="list" :border="true" row-key="key">
                    <el-table-column prop="key" label="字段名" align="center"></el-table-column>
                    <el-table-column prop="type" label="类型" align="center"></el-table-column>
                    <el-table-column prop="label" label="显示列名" align="center">
                        <template #default="scope">
                            <el-input v-model="scope.row.label" v-on:change="generateCode"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="edit" label="是否行编辑" align="center">
                        <template #default="scope">
                            <el-switch v-model="scope.row.edit" v-on:change="generateCode"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="width" label="宽度" align="center">
                        <template #default="scope">
                            <el-input-number v-model="scope.row.width" :controls="false" v-on:change="generateCode"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column prop="align" label="是否居中" align="center">
                        <template #default="scope">
                            <el-switch v-model="scope.row.align" active-value="center" inactive-value="left" v-on:change="generateCode"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sortable" label="是否排序" align="center">
                        <template #default="scope">
                            <el-switch v-model="scope.row.sortable" v-on:change="generateCode"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="required" label="是否必填" align="center">
                        <template #default="scope">
                            <el-switch v-model="scope.row.required" v-on:change="generateCode"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="message" label="必填描述" align="center">
                        <template #default="scope">
                            <el-input v-model="scope.row.message" v-on:change="generateCode"></el-input>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-input v-model="columnsCode" readonly type="textarea" :autosize="{minRows:10}" resize="none"></el-input>
            <el-input v-model="formItemsCode" readonly type="textarea" :autosize="{minRows:10}" resize="none"></el-input>
            <el-input v-model="rulesCode" readonly type="textarea" :autosize="{minRows:10}" resize="none"></el-input>
        </el-space>
    </div>
</template>
<script type="text/javascript">
    var @(ViewBag.PageName) = {
        template: "#@(ViewBag.PageTemplate)", data() {
            return {
                path: "@(ViewBag.PagePath)",
                tableName: null,
                list: [],
                columnsCode: null,
                formItemsCode: null,
                rulesCode: null
            }
        },
        methods: {
            generate(){
                var that = this;
                var tableName = that.tableName;
                if (tableName) {
                    that.columnsCode = null;
                    that.formItemsCode = null;
                    that.rulesCode = null;
                    app.func.getData(`${that.path}/generatetablecolumnsdata`, { tableName }, ".layout-page-content", result => {
                        that.listInit(result.data);
                        that.generateCode();
                    });
                }
            },
            listInit(data){
                var temp = [];
                Object.keys(data).forEach(key => {
                    temp.push({
                        key: key,
                        type: data[key],
                        label: key,
                        edit: false,
                        width: 100,
                        align: "center",
                        sortable: false,
                        required: false,
                        message: null
                    });
                });
                this.list = temp;
            },
            generateCode(){
                var that = this;
                var columns = [], items = [], rules = [];
                that.list.forEach(col => {

                    // columns
                    var tag = col.edit ? "single_table_editor" : "el-table-column";
                    var attrs = ` prop="${col.key}" label="${col.label}" width="${col.width}" align="${col.align}"`;
                    var sortable = col.sortable ? " sortable" : "";
                    if (col.edit) {
                        columns.push(`<${tag}${attrs}${sortable}>`);
                        columns.push(`    <template #default="scope">`);
                        switch (col.type) {
                            case "long":
                            case "int":
                            case "decimal":
                                columns.push(`        <el-input-number v-model="scope.row.${col.key}" :controls="false"></el-input-number>`);
                                break;
                            case "bool":
                                columns.push(`        <el-switch v-model="scope.row.${col.key}"></el-switch>`);
                                break;
                            case "DateTime":
                                columns.push(`        <el-date-picker v-model="scope.row.${col.key}" type="date" value-format="YYYY-MM-DD"></el-date-picker>`);
                                break;
                            default:
                                columns.push(`        <el-input v-model="scope.row.${col.key}"></el-input>`);
                                break;
                        }
                        columns.push(`    </template>`);
                        columns.push(`</${tag}>`);
                    }
                    else { columns.push(`<${tag}${attrs}${sortable}></${tag}>`); }

                    // items
                    items.push(`<el-form-item prop="${col.key}" label="${col.label}">`);
                    switch (col.type) {
                        case "long":
                        case "int":
                        case "decimal":
                            items.push(`    <el-input-number v-model="record.${col.key}" :controls="false"></el-input-number>`);
                            break;
                        case "bool":
                            items.push(`    <el-switch v-model="record.${col.key}"></el-switch>`);
                            break;
                        case "DateTime":
                            items.push(`    <el-date-picker v-model="record.${col.key}" type="date" value-format="YYYY-MM-DD"></el-date-picker>`);
                            break;
                        default:
                            items.push(`    <el-input v-model="record.${col.key}"></el-input>`);
                            break;
                    }
                    items.push(`</el-form-item>`);

                    // rules
                    if (col.required) { rules.push(`    ${col.key}: [{ required: true, message: "${col.message || `请输入${col.label}`}" }]`); }
                });

                that.columnsCode = columns.join("\n");
                that.formItemsCode = items.join("\n");
                that.rulesCode = rules.length ? `rules:{\n${rules.join(",\n")}\n}` : null;
            },
            clear(){
                this.list = [];
                this.columnsCode = null;
                this.formItemsCode = null;
                this.rulesCode = null;
            }
        },
        mounted() { }
    };
</script>